<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>

<head>
    <script src="js/jquery/2.0.0/jquery.min.js"></script>
    <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <link href="css/index.css" rel="stylesheet">
</head>

<body>
<%@include file="nav.jsp"%>
<%@include file="header.jsp"%>

<%@include file="categorybar.jsp"%>

<div>
    <div id="category">
        <div class="categoryPageDiv">
            <img src="img/category/72.jpg">

            <script>
                $(function(){
                    $("input.sortBarPrice").keyup(function(){
                        var num= $(this).val();
                        if(num.length==0){
                            $("div.productUnit").show();
                            return;
                        }

                        num = parseInt(num);
                        if(isNaN(num))
                            num= 1;
                        if(num<=0)
                            num = 1;
                        $(this).val(num);

                        var begin = $("input.beginPrice").val();
                        var end = $("input.endPrice").val();
                        if(!isNaN(begin) && !isNaN(end)){
                            console.log(begin);
                            console.log(end);
                            $("div.productUnit").hide();
                            $("div.productUnit").each(function(){
                                var price = $(this).attr("price");
                                price = new Number(price);

                                if(price<=end && price>=begin)
                                    $(this).show();
                            });
                        }

                    });
                });
            </script>
            <div class="categorySortBar">

                <table class="categorySortBarTable categorySortTable">
                    <tr>
                        <td class="grayColumn"><a href="#nowhere">综合<span class="glyphicon glyphicon-arrow-down"></span></a></td>
                        <td><a href="#nowhere">人气<span class="glyphicon glyphicon-arrow-down"></span></a></td>
                        <td><a href="#nowhere">新品<span class="glyphicon glyphicon-arrow-down"></span></a></td>
                        <td><a href="#nowhere">销量<span class="glyphicon glyphicon-arrow-down"></span></a></td>
                        <td><a href="#nowhere">价格<span class="glyphicon glyphicon-resize-vertical"></span></a></td>
                    </tr>
                </table>

                <table class="categorySortBarTable">
                    <tr>
                        <td><input class="sortBarPrice beginPrice" type="text" placeholder="请输入"></td>
                        <td class="grayColumn priceMiddleColumn">-</td>
                        <td><input class="sortBarPrice endPrice" type="text" placeholder="请输入"></td>
                    </tr>
                </table>

            </div>

            <div class="categoryProducts">

                <c:forEach items="${pageBean.records}" var="p">
                <div class="productUnit" price="799.2">
                    <div class="productUnitFrame">
                        <a href="product?id=${p.id}">
                            <img class="productImage" src="${p.pic}">
                        </a>
                        <span class="productPrice">¥${p.price}</span>
                        <a class="productLink" href="product?id=${p.id}">
                            ${p.name}
                        </a>

                        <a  class="tmallLink" href="#nowhere">天猫专卖</a>

                        <div class="show1 productInfo">
                            <span class="monthDeal ">月成交 <span class="productDealNumber">16笔</span></span>
                            <span class="productReview">评价<span class="productReviewNumber">14</span></span>
                            <span class="wangwang">
					<a class="wangwanglink" href="#nowhere">
						<img src="img/site/wangwang.png">
					</a>

					</span>
                        </div>
                    </div>
                </div>
                </c:forEach>


                <div style="clear:both"></div>
            </div>

            <ul class="pagination pagination-sm m-0 float-right">

                <c:choose>
                    <c:when test="${pageBean.current==1}">
                        <li class="page-item"><a class="page-link" href="javascript:;">&laquo;</a></li>
                    </c:when>
                    <c:otherwise>
                        <li class="page-item"><a class="page-link" href="/category?cid=${param.cid}&page=${pageBean.current-1}">&laquo;</a></li>
                    </c:otherwise>
                </c:choose>

                <c:forEach begin="1" end="${pageBean.pages}" var="p">
                    <li class="page-item"><a class="page-link" href="/category?cid=${param.cid}&page=${p}">${p}</a></li>
                </c:forEach>


                <c:choose>
                    <c:when test="${pageBean.current==pageBean.pages}">
                        <li class="page-item"><a class="page-link" href="javascript:;">&raquo;</a></li>
                    </c:when>
                    <c:otherwise>
                        <li class="page-item"><a class="page-link" href="/category?cid=${param.cid}&page=${pageBean.current+1}">&raquo;</a></li>
                    </c:otherwise>
                </c:choose>
            </ul>
        </div>

    </div>

</div>
<%@include file="footer.jsp"%>
</body>
</html>